<template >
    <div class="back bg-cover w-full h-full">
        <div class="opacity-80 bg-white a w-[400px] h-80 shadow-lg rounded-lg absolute right-32 top-1/2 mt-[-160px]">
            <h3 class="text-center text-[40px] text-blue-500 font-bold pt-5">Admin Login</h3>
            <div>
                <input class="w-60 h-9 mt-7 ml-20 pl-2 rounded border-2 border-solid border-zinc-600 " type="text"
                    id="userName" placeholder="请输入用户名">
            </div>
            <div>
                <input class="w-60 h-9 mt-7 ml-20 pl-2 rounded border-2 border-solid border-zinc-600" type="password"
                    id="password" placeholder="请输入密码">
            </div>
            <div class="mt-10 text-base flex flex-nowrap justify-evenly items-center">
                <button
                    class="border-2 border-solid border-blue-500 hover:bg-blue-500 hover:text-white rounded-lg py-1.5 px-5"
                    @click="login">登录</button>
            </div>
        </div>
    </div>
    <div class="back">
        <div class="a">
            <h3>Admin Login</h3>
            <div class="text">
                <input class="w-66 h-9 pl-2" type="text" id="userName" placeholder="请输入管理员账号">
            </div>
            <div class="text">
                <input class="w-66 h-9 pl-2" type="password" id="password" placeholder="请输入密码">
            </div>
            <div class="buttom">
                <button class="login but" @click="login">登录</button>
            </div>
        </div>
    </div>
</template>
  
<script>
import axios from 'axios'
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.checkLogin()
    },
    methods: {
        checkLogin() {
            if ( window.localStorage.getItem( "adminToken" ) != null ) {
                this.$router.push( { path: '/admin' } )
            } else {
                let pas = window.sessionStorage.getItem( 'pas' )
                if ( pas != null ) {
                    this.$message.success( pas );
                }
                sessionStorage.removeItem( 'pas' );
                let msg = window.sessionStorage.getItem( 'msg' )
                if ( msg != null ) {
                    this.$message.error( msg );
                }
                sessionStorage.removeItem( 'msg' );
            }
        },
        login() {
            var userName = document.getElementById( 'userName' ).value
            axios( {
                url: 'http://127.0.0.1:8081/api/admin/login',
                method: 'post',
                params: {
                    userName: userName,
                    password: document.getElementById( 'password' ).value,
                }
            } ).then( res => {
                if ( res.data.code === 20000 ) {
                    window.localStorage.setItem( 'adminToken', res.data.data.token )
                    window.localStorage.setItem( 'userName', userName )
                    this.$router.push( { path: '/admin' } )
                } else {
                    this.$message.success( res.data.message );
                }
            } )
        },
    },
}
</script>
  
<style scoped >
.back {
    background: url(../../assets/img/login.png);
}
</style>